<template>
	<view class="min-vh-100 flex-col  w-100" style="background-color: #F3F3F3;">
		<view class="  brs-12 mt-12  hh position-relative">
			<view class="d-flex flex-column px-3 reserva">
				<template v-if="card_list.length">
					<view class="card h-100  pt-12" v-for="(v,i) in card_list" :key="i" @click="toMyVoucherDetail(v.id)">
						<view class="d-flex justify-content-between align-items-center card-top px-3 py-2 ">
							<view class="font-600 ellipsis-line w-0 flex-1 text-white">
								{{v.name}}
							</view>
							<view class="d-flex font-600 text-666D73 align-items-baseline">
				<!-- 				<view class="">￥</view>
								<view class=" font-24 text-theme">{{v.price}}</view> -->
							</view>
						</view>
						<view class="bg-white d-flex content w-100">
							<view class="d-flex justify-content-between flex-1">
								<view class="pic d-flex flex-column  align-items-center pe-2">
									<view class="d-flex align-items-baseline">
										<view class="text-theme font-600 font-28">
											{{v.total_hour}}
										</view>
										<view class="font-12 text-666D73">
											小时
										</view>
									</view>
									<view class="font-14 font-600 text-666D73">
										总时长
									</view>
								</view>
								<view class="d-flex justify-content-between flex-1 align-items-center">
									<view class="detail ps-12">
										<view class="d-flex font-14 font-500 text-AAB5BF align-items-center pb-1">
											<view class="">
												适用门店：
											</view>
											<view class="font-14 font-600 text-222426">
												{{v.display_store_name}}
											</view>
										</view>
										<view class="d-flex font-14 font-500 text-AAB5BF align-items-center pb-1">
											<view class="">
												适用教室：
											</view>
											<!--
											<view class="font-14 font-600 text-222426">
												{{v.display_room_name}}
											</view>
											-->
											<view class="font-14 font-600 text-222426">
												 详情可见
											</view>
										</view>
										<view class="d-flex font-14 font-500 text-AAB5BF align-items-center pb-1">
											<view class="">
												剩余时长：
											</view>
											<view class="font-14 font-600 text-222426">
												{{v.total_hour - v.hasconsumedhour}}小时
											</view>
										</view>
									</view>
									<view class="sanjiao">
									</view>
								</view>
							</view>
							
						</view>
					</view>
				</template>
				<view v-else class="empty d-flex justify-content-center flex-column align-items-center h-100">
					<image src="../../static/imgs/empty.png" class="img" />
					<view class="text-AAB5BF mt-1 pt-3">暂时没有数据</view>
				</view>
			</view>
		</view>
		<view class="position-fixd save-action ">
			<view class="px-3 mx-3">
				<button class="button font-20 bg-white text-theme" :disabled="false" @click="goHome">去预定</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				card_list: []
			};
		},
		onLoad() {
			this.$u.api.getMyCards()
				.then((res) => {
					if (1 == res.code) {
						this.card_list = res.data
					}
				})
		},
		methods: {
			toMyVoucherDetail(id) {
				this.$u.route({
					url: 'pages/myCenter/myVoucherDetail',
					params: {
						id: id
					}
				})
			},
			goHome() {
				this.$u.route({
					url: '/pages/index/index',
					type: 'tab'
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.reserva {
		>view:last-child {
			padding-bottom: 40rpx;
		}
	}

	.card {
		&-top {
			background-color: #D85886;
			border-radius: 12px 12px 0 0;
		}

		.content {
			padding: 40rpx 32rpx;
			border-radius: 0 0 12px 12px;

			.pic {
				border-right: 2rpx solid #F5F7F8;
			}

		}

		.sanjiao {
			width: 0;
			height: 0;
			border-left: 16rpx solid #D85886;
			border-top: 16rpx solid transparent;
			border-bottom: 16rpx solid transparent;
		}
	}
	.empty {
		padding-top: calc(40vh - 244rpx);
	
		image {
			width: 288rpx;
			height: 304rpx;
		}
	}
	.save-action {
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
		width: 100%;
	
		.button {
			padding: 0 16px;
			height: 96rpx;
			line-height: 96rpx;
			font-weight: 600;
			border-radius: 40rpx 0 40rpx 40rpx;
	
			&[disabled]:not([type]) {
				background-color: #AAB5BF !important;
			}
		}
	}
</style>